<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>商品管理—商品列表</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script type="text/javascript" src="js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="js/admin_js/f.js"></script>
</head>

<body>
<!--导航栏-->
<ul class="layui-nav">
    <li class="layui-nav-item">
        <a href="/admin/layuiAdminPage">管理员管理</a>
    </li>
    <li class="layui-nav-item">
    <a href="/admin/layuiProductPage">商品查看</a>
    </li>
    <li class="layui-nav-item layui-this"><a href="/admin/layuiAddProductPage">添加商品</a></li>
    <li class="layui-nav-item">
        <a href="/admin/layuiOrderPage">订单管理</a>
    </li>
</ul>

<!--添加商品表单-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>商品添加</legend>
</fieldset>

<form  target="form" class="layui-form" action="/admin/addProduct" method="post" enctype="multipart/form-data" lay-filter="example" id="product_add">
    <!--文本框-->
    <div class="layui-form-item">
        <label class="layui-form-label">商品名</label>
        <div class="layui-input-block">
            <input id="productName" type="text" name="productName" lay-verify="title" autocomplete="off"
                   placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">商品类型</label>
        <div class="layui-input-inline">
            <select id="productCategoryId" name="productCategoryId" lay-verify="" lay-search>
                <option value="">请选择分类</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-block">
            <input id="productPrice" type="number" name="productPrice" lay-verify="title" autocomplete="off"
                   placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <!--文本域-->
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">商品详情</label>
        <div class="layui-input-block">
            <textarea id="productIntro" placeholder="请输入内容" class="layui-textarea" name="productIntro"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">热度值</label>
        <div class="layui-input-block">
            <input id="productHeat" type="number" name="productHeat" lay-verify="title" autocomplete="off"
                   placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序值</label>
        <div class="layui-input-block">
            <input id="productSequence" type="number" name="productSequence" lay-verify="title" autocomplete="off"
                   placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">库存</label>
        <div class="layui-input-block">
            <input id="productAmount" type="text" name="productAmount" lay-verify="title" autocomplete="off"
                   placeholder="请输入标题" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">头图</label>
        <div class="layui-input-block">
            <input class="layui-input" type="file" accept="image/*" name="coverPic" id="coverPic">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block">
            <input class="layui-input" type="file" accept="image/*" name="pics" multiple="multiple" id="pics">
        </div>
    </div>

    <!--    <div class="layui-form-item">-->
    <!--        <label class="layui-form-label">选择框</label>-->
    <!--        <div class="layui-input-block">-->
    <!--            <select class="JS_productCategory" name="interest" lay-filter="aihao">-->

    <!--            </select>-->
    <!--        </div>-->
    <!--    </div>-->

    <div class="layui-form-item">
        <label class="layui-form-label">大小</label>
        <div class="layui-input-block">
            <input id="size" type="text" name="size" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">重量</label>
        <div class="layui-input-block">
            <input id="weight" type="text" name="weight" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input type="radio" name="isVirtual" value="0" title="实体商品" checked="">
            <input type="radio" name="isVirtual" value="1" title="虚拟商品">
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
            <button type="submit" class="layui-btn" id="gogogo">立即提交</button>
        </div>
    </div>
</form>

<iframe name="form" id="form" style="display:none"></iframe>
<!--提交js-->
<!--<script>-->
<!--    layui.use('form', function () {-->
<!--        var form = layui.form;-->
<!--        layui.$('#gogogo').on('click', function () {-->
<!--            alert("进来了");-->
<!--            debugger-->
<!--            //var formData = form.val('example');-->

<!--            var productName = document.getElementById("productName").value;-->
<!--            var productCategoryId = document.getElementById("productCategoryId").value;-->
<!--            var productPrice = document.getElementById("productPrice").value;-->
<!--            var productIntro = document.getElementById("productIntro").value;-->
<!--            var productHeat = document.getElementById("productHeat").value;-->
<!--            var productSequence = document.getElementById("productSequence").value;-->
<!--            var productAmount = document.getElementById("productAmount").value;-->

<!--            var coverPic = document.getElementById("coverPic").files;   //文件是通过.files取数据-->
<!--            var pics = document.getElementById("pics").files;-->

<!--            var size = document.getElementById("size").value;-->
<!--            var weight = document.getElementById("weight").value;-->
<!--            var isVirtual = document.getElementsByName("isVirtual").value;-->

<!--            var formData = new FormData();  //通过FormData拼装数据-->
<!--            formData.append("productName", productName);-->
<!--            formData.append("productCategoryId", productCategoryId);-->
<!--            formData.append("productPrice", productPrice);-->
<!--            formData.append("productIntro", productIntro);-->
<!--            formData.append("productHeat", productHeat);-->
<!--            formData.append("productSequence", productSequence);-->
<!--            formData.append("productAmount", productAmount);-->
<!--            formData.append("productCategoryId", productCategoryId);-->

<!--            formData.append("coverPic", coverPic[0]);  //因为取出的文件是数组，所以取第一项-->
<!--            formData.append("pics", pics);-->

<!--            formData.append("size", size);-->
<!--            formData.append("weight", weight);-->
<!--            formData.append("isVirtual", isVirtual);-->

<!--            $.ajax({-->
<!--                url: "/admin/addProduct",-->
<!--                data: formData,-->
<!--                type: "post",-->
<!--                processData: false,-->
<!--                success: function (data) {-->
<!--                    alert(data.msg);-->
<!--                    window.location.href = "/admin/layuiAdminPage";-->
<!--                }-->
<!--            })-->
<!--            return false;-->
<!--        });-->
<!--    });-->
<!--</script>-->

<script>
    layui.$("#form").load(function(){
        var text = $(this).contents().find("body").text(); //获取到的是json的字符串
        var data = $.parseJSON(text);  //json字符串转换成json对象
        alert(data.msg);
        if(data.status==200){
            window.location.href = "/admin/layuiProductPage";
        }
    })
</script>


<!--表单js-->
<script>
    layui.use('form', function () {
        var form = layui.form;
        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });
    });
</script>

<!--图片上传js-->
<!--<script>-->
<!--    layui.use(['upload', 'element', 'layer'], function () {-->
<!--        var $ = layui.jquery-->
<!--            , upload = layui.upload-->
<!--            , element = layui.element-->
<!--            , layer = layui.layer;-->

<!--        //常规使用 - 普通图片上传-->
<!--        var uploadInst = upload.render({-->
<!--            elem: '#test1'-->
<!--            , url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。-->
<!--            , before: function (obj) {-->
<!--                //预读本地文件示例，不支持ie8-->
<!--                obj.preview(function (index, file, result) {-->
<!--                    $('#demo1').attr('src', result); //图片链接（base64）-->
<!--                });-->

<!--                element.progress('demo', '0%'); //进度条复位-->
<!--                layer.msg('上传中', {icon: 16, time: 0});-->
<!--            }-->
<!--            , done: function (res) {-->
<!--                //如果上传失败-->
<!--                if (res.code > 0) {-->
<!--                    return layer.msg('上传失败');-->
<!--                }-->
<!--                //上传成功的一些操作-->
<!--                //……-->
<!--                $('#demoText').html(''); //置空上传失败的状态-->
<!--            }-->
<!--            , error: function () {-->
<!--                //演示失败状态，并实现重传-->
<!--                var demoText = $('#demoText');-->
<!--                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');-->
<!--                demoText.find('.demo-reload').on('click', function () {-->
<!--                    uploadInst.upload();-->
<!--                });-->
<!--            }-->
<!--            //进度条-->
<!--            , progress: function (n, elem, e) {-->
<!--                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用-->
<!--                if (n == 100) {-->
<!--                    layer.msg('上传完毕', {icon: 1});-->
<!--                }-->
<!--            }-->
<!--        });-->


<!--//多图片上传-->
<!--        upload.render({-->
<!--            elem: '#test2'-->
<!--            , url: '' //此处配置你自己的上传接口即可-->
<!--            , multiple: true-->
<!--            , before: function (obj) {-->
<!--                //预读本地文件示例，不支持ie8-->
<!--                obj.preview(function (index, file, result) {-->
<!--                    $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')-->
<!--                });-->
<!--            }-->
<!--            , done: function (res) {-->
<!--                //上传完毕-->
<!--            }-->
<!--        });-->

<!--    });-->
</script>

</body>

</html>